<!-- @format -->

<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="btnCharge">
        <el-button type="warning" @click="submitForm('ruleForm')"
          >收费</el-button
        >
      </div>

      <div class="registrationIpn">
        <div class="regTop">
          <div>
            <el-form-item label="挂号单号" prop="odd">
              <div>
                <el-input v-model="ruleForm.odd"></el-input>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="科室" prop="section">
              <div>
                <el-select v-model="ruleForm.section" placeholder="请选择">
                  <el-option label="外科" value="shanghai"></el-option>
                  <el-option label="内科" value="beijing"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="接诊类型" prop="mytype">
              <div>
                <el-select v-model="ruleForm.mytype" placeholder="请选择">
                  <el-option label="普通门诊" value="shanghai"></el-option>
                  <el-option label="专家门诊" value="beijing"></el-option>
                  <el-option label=" 高级专家" value="beijing"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="接诊医生" prop="doctor">
              <div>
                <el-select v-model="ruleForm.doctor" placeholder="请选择">
                  <el-option label="王梅" value="shanghai"></el-option>
                  <el-option label="李琳" value="beijing"></el-option>
                  <el-option label="李网友" value="beijing"></el-option>
                  <el-option label="李海燕" value="beijing"></el-option>
                  <el-option label="弹指翰" value="beijing"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </div>

        <div class="regFoote">
          <div>
            <el-form-item label="挂号费用" prop="oddCost">
              <div>
                <el-select v-model="ruleForm.oddCost" placeholder="请选择">
                  <el-option label="10" value="shanghai"></el-option>
                  <el-option label="50" value="beijing"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="诊疗费">
              <div>
                <el-select v-model="ruleForm.doctorCost" placeholder="请选择">
                  <el-option label="100" value="shanghai"></el-option>
                  <el-option label="200" value="beijing"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div>
            <p>
              <label for="inp1">挂号日期</label>
            </p>
            <el-input
              v-model="ruleForm.oddDate"
              id="inp1"
              placeholder="2020-01-01"
            ></el-input>
          </div>
          <div>
            <p>
              <label for="inp2">挂号员</label>
            </p>
            <el-input v-model="ruleForm.oddMan" id="inp2"></el-input>
          </div>
        </div>
      </div>
      <div class="sizeH2">
        <h2>患者信息</h2>
      </div>
      <div class="regExpense">
        <div>
          <p>
            <label for="patientName">患者姓名</label>
          </p>
          <el-input
            v-model="ruleForm.patientName"
            id="patientName"
            placeholder="患者姓名/手机号码/证件号码/卡号"
          ></el-input>
        </div>
        <div>
          <p>
            <label for="patientCard">患者卡号</label>
          </p>
          <el-input v-model="ruleForm.patientCard" id="patientCard"></el-input>
        </div>

        <div>
          <el-form-item label="患者年龄" prop="patientAge">
            <div>
              <el-input v-model="ruleForm.patientAge"></el-input>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="出生日期" prop="patientDate">
            <div>
              <el-input v-model="ruleForm.patientDate"></el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="regExpense">
        <div>
          <el-form-item label="性别" prop="sex">
            <div>
              <el-select v-model="ruleForm.sex" placeholder="请选择">
                <el-option label="男" value="shanghai"></el-option>
                <el-option label="女" value="beijing"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="手机号码">
            <div>
              <el-input v-model="ruleForm.phone"></el-input>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="证件号码">
            <div>
              <el-input v-model="ruleForm.papersNub"></el-input>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="接诊详情" prop="AcceptsType">
            <div>
              <el-input v-model="ruleForm.AcceptsType"></el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="redactSite">
        <div>
          <el-form-item label="地址">
            <div>
              <el-cascader
                expand-trigger="hover"
                :options="options"
                v-model="ruleForm.patlocation"
              ></el-cascader>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-input v-model="ruleForm.inpLength" class="inpLength"></el-input>
        </div>
      </div>
      <div>
        <p>
          <label for="beizhu">备注</label>
        </p>
        <el-input
          v-model="ruleForm.remarks"
          id="beizhu"
          style="margin-top: 5px; width: 840px"
        ></el-input>
      </div>
    </el-form>
  </div>
</template>

<script>
import reset from "../../assect/area.json";
// import { addfunApi } from "../../api/RegistrationApi";
export default {
  data() {
    var oddVerify = (rule, value, callback) => {
      var reg = /^[\d]{6,123}$/;
      if (reg.test(value) || value == "") {
        console.log(11);
      } else {
        callback(new Error("请输入正确的单号"));
      }
    };
    return {
      options: reset,
      ruleForm: {
        odd: "", //单号
        section: "", //科室
        mytype: "", //接诊类型
        doctor: "", //问诊医生
        oddCost: "", //挂号费用
        doctorCost: "", //诊断费用
        oddDate: "", //单号日期
        oddMan: "", //挂号人
        patientName: "", //患者姓名
        patientCard: "", //患者卡号
        patientAge: "", // 患者年龄
        patientDate: "", //出生日期
        sex: "", //性别
        phone: "", //手机号码
        papersNub: "", //证件号码
        AcceptsType: "", //接诊详情
        patlocation: "", //患者地址
        inpLength: "", //门牌号
        remarks: "", //备注
      },
      rules: {
        // odd: [{ required: true, message: "请输入争", trigger: "blur" }],
        //科室
        section: [
          { required: true, message: "需要选择问诊科室", trigger: "change" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        // 接诊类型
        mytype: [
          { required: true, message: "请确定接诊类型", trigger: "change" },
        ],
        // 接诊医生
        doctor: [
          { required: true, message: "选择一位医生", trigger: "change" },
        ],
        // 挂号费用
        oddCost: [
          { required: true, message: "选择挂号费用", trigger: "change" },
        ],
        //患者姓名
        patientName: [
          {
            required: true,
            message: "需要输入名字/手机号码/证件卡号",
            trigger: "blur",
          },
        ],
        //患者年龄
        patientAge: [
          { required: true, message: "输入自己的年龄啊", trigger: "blur" },
        ],
        //出生日期
        patientDate: [
          {
            required: true,
            message: "还有你的出生日期也需要",
            trigger: "blur",
          },
        ],
        //性别
        sex: [{ required: true, message: "你是哥哥还是眉眉", trigger: "blur" }],
        //接诊类型
        AcceptsType: [
          {
            required: true,
            message: "清楚一点告诉我怎么救你",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // console.log(this.ruleForm, reset);
      this.$refs[formName].validate((valid) => {
        console.log(formName);
        if (valid) {
          alert("submit!");
          addfunApi(this.ruleForm).then((res) => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }
  },
};
</script>

<style lang="less" scoped>
@import url("../../assect/resets.css");

.container {
  //最外层
  // width: 1180px;
  // width: 100%;
  border-radius: 10px;
  background: #fff;
  padding: 0 30px;
  min-height: 690px;
  padding-top: 20px;
  margin-left: 10px;
  margin-top: 20px;
  min-height: 960px;
  // 收费按钮
  .btnCharge {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 30px;
    button {
      width: 100px;
    }
  }
  // 挂号单
  /deep/.registrationIpn {
    width: 100%;
    height: 180px;
    background: #e6e7fb;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;

    .regTop,
    .regFoote {
      display: flex;
      justify-content: space-between;
      // flex-wrap: wrap;
    }
    .regFoote {
      margin-bottom: 36px;
    }
    .el-input {
      margin-top: 2px;
      width: 260px;
      height: 40px;
    }
  }
  /deep/.el-form-item__content {
    margin-left: 0 !important;
    // margin-bottom: 5px !important;
  }
  /deep/.el-form-item__label {
    display: flex !important;
    line-height: 13px;
  }
  /deep/.el-select {
    color: #a6a4a4 !important;
  }
  //h2标签
  .sizeH2 {
    color: #666eeb;
    margin-bottom: 26px;
    h2 {
      font-size: 20px;
    }
  }
  //费用
  .regExpense {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .el-input {
      margin-top: 5px;
      width: 270px;
      height: 40px;
    }
    // /deep/.el-form-item__label {
    //   // margin-bottom: 6px !important;
    // }
    // .demo-ruleForm {
    // 	width: 270px;
    // 	height: 40px;
    // }
    /deep/.el-input__inner {
      // margin-top: 5px;
      width: 270px;
      height: 40px;
    }
  }
  /deep/input {
    height: 40px;
  }
  // 地址编辑
  .redactSite {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /deep/.el-input__inner {
      margin-top: 5px;
      width: 270px;
      height: 40px;
    }
    /deep/.inpLength {
      input {
        width: 560px !important;
        margin-left: 12px;
      }
    }
  }
}
</style>
